<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			#box{
				width:600px;
				height:500px;
				border:4px solid red;
			}
		</style>
		<script src='jquery-3.4.1.js'></script>
		<script src='jquery.easing.1.3.js'></script>
		<script>
			$(function(){
//				$("#btn").click(function(){
//					//清空元素内容
//					//$("#box").empty();
//					//删除元素
//					//$("#box").remove();
//					$("#box").detach();
//				})
				$("#title").click(function(){
					alert('哈哈哈后盾人');
				})
				//删除元素
				//remove会将元素节点和他身上的事件效果全部删掉
				//detach只删除元素节点，不删除他身上的事件和效果
				$("#btn1").click(function(){
				    //delh1=$("#title").remove();
				    delh1=$("#title").detach();
				})
				//恢复
				$("#btn2").click(function(){
					$("#btn2").after(delh1);
				})
			})
		</script>
	</head>
	<body>
		<input type="button" id='btn1' value='删除' />
		<input type="button" id='btn2' value='恢复' />
		<h1 id='title'>我是h1标签</h1>
		<input type="button" id='btn' value='我是按钮' />
		<div id='box'>
			<h2>后盾人 人人做后盾0</h2>
			<h2>后盾人 人人做后盾1</h2>
			<h2>后盾人 人人做后盾2</h2>
			<h2>后盾人 人人做后盾3</h2>
			<h2>后盾人 人人做后盾4</h2>
		</div>
		
	</body>
</html>
